<template>
<div>
  <el-form
    ref="mainForm"
    :model="formData"
    :rules="rules"
    size="mini"
    label-width="100px"
    class="editForm"
  >
    <el-row class="operation-button">
      <el-button class=" right-btn" type="primary" @click="cancel">修改</el-button>
      <el-button class=" right-btn" type="primary" @click="saveData()">保存</el-button>
      <el-button class=" right-btn" type="primary" @click="saveData()">提交</el-button>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="业务编号" prop="businessNumber" class="car-form-item">
          <el-input v-model="formData.businessNumber" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="客户手机号" prop="customerPhoneNumber" class="car-form-item">
          <el-input v-model="formData.customerPhoneNumber" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="放款日期" prop="loanDate" class="car-form-item">
          <el-input v-model="formData.loanDate" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="车牌号" prop="vehicleNumber" class="car-form-item">
          <el-input v-model="formData.vehicleNumber" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="结清类型" prop="settleType" class="car-form-item">
          <el-select v-model="formData.settleType" class="car-modal-col" placeholder="请选择结清类型">
            <el-option v-for="item in settleTypeData" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="档案编号" prop="archiveNumber" class="car-form-item">
          <el-input v-model="formData.archiveNumber" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="业务部门" prop="businessDepartment" class="car-form-item">
          <el-input v-model="formData.businessDepartment" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="按揭银行" prop="mortgageBank" class="car-form-item">
          <el-input v-model="formData.mortgageBank" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="贷款金额" prop="loanAmount" class="car-form-item">
          <el-input type="number" v-model="formData.loanAmount" class="car-modal-col" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="是否代办结清" prop="agentSettlement" class="car-form-item">
          <el-input v-model="formData.agentSettlement" class="car-modal-col" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="客户姓名" prop="customerName" class="car-form-item">
          <el-input v-model="formData.customerName" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="业务员" prop="salesman" class="car-form-item">
          <el-input v-model="formData.salesman" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="车价" prop="carPrice" class="car-form-item">
          <el-input v-model="formData.carPrice" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="银行分期本金" prop="installmentPrincipal" class="car-form-item">
          <el-input type="number" v-model="formData.installmentPrincipal" class="car-modal-col" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="结清代办费" prop="settleOffAgencyFee" class="car-form-item">
          <el-input type="number" v-model="formData.settleOffAgencyFee" class="car-modal-col" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="身份证号" prop="idNumber" class="car-form-item">
          <el-input v-model="formData.idNumber" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="按揭期限" prop="mortgagePeriod" class="car-form-item">
          <el-input v-model="formData.mortgagePeriod" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="车辆属性" prop="carPriorities" class="car-form-item">
          <el-input v-model="formData.carPriorities" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="应付总额" prop="totalPayable" class="car-form-item">
          <el-input type="number" v-model="formData.idNumber" class="car-modal-col" placeholder="请输入" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18">
        <el-form-item label="备注" prop="comments" class="car-form-item">
          <el-input v-model="formData.comments" class="car-modal-col"  placeholder="请输入" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="结清日志" class="car-form-item">
          <el-table
            border
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}"
            :data="settleLogs"
            style="width: 100%">
            <el-table-column
              prop="id"
              label="编号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="submitedBy"
              label="提交人"
              width="180">
            </el-table-column>
            <el-table-column
              prop="message"
              label="提交信息">
            </el-table-column>
            <el-table-column
              prop="submitedAt"
              label="提交日期">
            </el-table-column>
            <el-table-column
              prop="auditStage"
              label="审核节点">
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="操作日志" prop="operationLogs" class="car-form-item">
          <el-table
            border
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}"
            :data="operationLogs"
            style="width: 100%">
            <el-table-column
              prop="id"
              label="编号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="submitedBy"
              label="提交人"
              width="180">
            </el-table-column>
            <el-table-column
              prop="message"
              label="提交信息">
            </el-table-column>
            <el-table-column
              prop="submitedAt"
              label="提交日期">
            </el-table-column>
            <el-table-column
              prop="auditStage"
              label="审核节点">
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row >
      <el-col :span="22" class="order-summary-detail">
        <el-scrollbar wrap-class="scrollar-wrapper" :style="{height:'200px'}">
          <order-detail></order-detail>
        </el-scrollbar>
      </el-col>
    </el-row>

  </el-form>
</div>
</template>

<script>
import orderDetail from "../order/order-detail"
export default {
  components:{
    //引入Order详情页面，在页面底部显示
    orderDetail
  },
  name: "settle-detail",
  data(){
    return {
      formData: {}, // 表单对象
      //结清类型
      settleTypeData:[
        {value:"compensationSettlement",label:"代偿结清"},
        {value:"earlySettlement",label:"提前结清"},
        {value:"normalSettlement",label:"正常结清"},
      ],
      //结清日志
      settleLogs:[],
      //操作日志
      operationLogs:[],
      //当前页结清编号
      settleNumber:"",
    }
  },
  created() {
    this.initDatabase(this.settleNumber)
  },
  methods:{
    async initDatabase(settleNumber){
      //初始化结清日志
      this.settleLogs=[
        {id:"1",submitedBy:"牛",message:"hahaaha",submitedAt:"2021-07-10",auditStage:"通过"},
        {id:"2",submitedBy:"牛",message:"hahaaha",submitedAt:"2021-07-10",auditStage:"通过"},
        {id:"3",submitedBy:"牛",message:"hahaaha",submitedAt:"2021-07-10",auditStage:"通过"}
      ],
        //初始化操作日志
      this.operationLogs=[
        {id:"4",submitedBy:"牛",message:"hahaaha",submitedAt:"2021-07-10",auditStage:"通过"},
        {id:"5",submitedBy:"牛",message:"hahaaha",submitedAt:"2021-07-10",auditStage:"通过"},
        {id:"6",submitedBy:"牛",message:"hahaaha",submitedAt:"2021-07-10",auditStage:"通过"}
      ]
    }
  }
}
</script>

<style scoped>
.operation-button{
  margin: 10px;
}
.right-btn{
  float: right;
  margin-right: 20px;
}
.el-select{
  width: 100%;
}
.el-scrollbar__wrap{
  overflow-x: hidden !important;
}
.order-summary-detail{
  border:1px solid grey;
  height: 200px;
  margin-left: 100px;
  margin-top: 30px;
}
</style>
